<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS3 实现六边形图片展示效果</title>
    <style type="text/css">
        body, div, img, ul, li
        {
            margin: 0;
            padding: 0;
        }
        body
        {
            font-size: 12px;
            background-color: #DDD;
            min-width: 1200px;
        }
        ul, ul li
        {
            list-style: none;
        }
        .clear
        {
            clear: both;
        }       
        .box
        {
            position: relative;
            width: 630px;
            margin: 100px auto;
        }
        .lineF, .lineS
        {
            position: absolute;
            visibility: hidden;
        }
        .lineS
        {
            top: 182px;
            left: 105px;
        }
        .boxF, .boxS, .boxT, .overlay
        {
            width: 200px;
            height: 250px;
            overflow: hidden;
        }
        .boxF, .boxS
        {
            visibility: hidden;
        }
        .boxF
        {
            transform: rotate(120deg);
            float: left;
            margin-left: 10px;
            -ms-transform: rotate(120deg);
            -moz-transform: rotate(120deg);
            -webkit-transform: rotate(120deg);
        }
        .boxS
        {
            transform: rotate(-60deg);
            -ms-transform: rotate(-60deg);
            -moz-transform: rotate(-60deg);
            -webkit-transform: rotate(-60deg);
        }
        .boxT
        {
            transform: rotate(-60deg);
            background: no-repeat 50% center;
            background-size: 125% auto;
            -ms-transform: rotate(-60deg);
            -moz-transform: rotate(-60deg);
            -webkit-transform: rotate(-60deg);
            visibility: visible;
			background-color: rgba(0,0,0,0.6);
        }
        .overlay
        {
            transition: all 250ms ease-in-out 0s;
            display: none;
            position: relative;
        }
        .overlay:hover
        {
            background-color: rgba(0,0,0,0.6);
        }
        .boxT:hover .overlay
        {
            display: block;
        }
        .overlay a
        {
            display: inline-block;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -16px 0 0 -16px;
            border-radius: 3px;
            background-color: #d3b850;
            text-align: center;
            line-height: 32px;
            width: 32px;
            height: 32px;
            text-decoration: none;
            color: White;
            font-size: 18px;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <div class="box">
        <!--第一行(lineFirst)-->
        <div class="lineF">
            <div class="boxF">
                <div class="boxS">
                    <div class="boxT" style="background-image: url(img/1.jpg);">
                        <div class="overlay">
                            <a href="#">+</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="boxF">
                <div class="boxS">
                    <div class="boxT" style="background-image: url(img/2.jpg);">
                        <div class="overlay">
                            <a href="#">+</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="boxF">
                <div class="boxS">
                    <div class="boxT" style="background-image: url(img/3.jpg);">
                        <div class="overlay">
                            <a href="#">+</a>
                        </div>
                    </div>
                </div>
            </div>
 
        </div>
        <!--第二行(lineSecond)-->
        <div class="lineS">
            <div class="boxF">
                <div class="boxS">
                    <div class="boxT" style="background-image: url(img/4.jpg);">
                        <div class="overlay">
                            <a href="#">+</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>